<template>
	<div class="products_stable">
	<!--上部按钮-->	
	<el-row style='margin:20px 67px;'>
	  <el-button type="info" icon="el-icon-circle-plus" plain @click='addInterface()'>添加接口</el-button>
	  <!--<el-button type="danger" icon="el-icon-delete" plain @click="dialogVisible = true">删除接口</el-button>-->
	  	<!--<el-input
		  	placeholder="请输入接口名称"
		  	v-model="inputValue"
		  	clearable
		  	style='width:300px;margin-left:50px;'>
		</el-input>
		<el-button icon="el-icon-search" circle></el-button>-->
	</el-row>
	<!--删除提示信息-->
	<el-dialog
	  title="提示信息"
	  :visible.sync="dialogVisible"
	  width="30%"
	  :before-close="handleClose">
	  <span>确定要删除接口</span>
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="dialogVisible = false">取 消</el-button>
	    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
	  </span>
	</el-dialog>
	<!--接口管理列表内容-->
		<el-table
			:data="tableData"
			style="width:90%; margin:0 auto;"  
			border
			v-loading="listLoading"
			:header-cell-class-name="tableheaderClassName"
			:row-class-name="tableRowClassName">
			<!--<el-table-column
		      type="selection"
		      width="55">
		    </el-table-column>-->
			<el-table-column 
						prop="name"
						label="接口名称">
					</el-table-column>
					<el-table-column
						prop="url"
						label="路径"
						width='300px'>
					</el-table-column>
					<el-table-column
						prop="version"
						label="版本">
					</el-table-column>
					<el-table-column
						prop="type"
						label="类型"
						:formatter="formatterType">
					</el-table-column>
					<el-table-column
						prop="description"
						label="描述">
					</el-table-column>
					<el-table-column
						prop="status"
						label="接口状态"
						:formatter="formatter"
						>
					</el-table-column>	  	 
					<el-table-column
				        prop="createTime"
				        label="创建日期"
				        >
				    </el-table-column>
				    <el-table-column
						fixed="right"
						label="操作"
						width="200">
							<template slot-scope="scope">
							<el-button v-if='scope.row.type === 0' @click="handleClick(scope.row)"  type="text" size="small" >
								<span  v-if='scope.row.status === 0'>发布</span>
								<span  v-if='scope.row.status === 1'>取消发布</span>
								<span  v-if='scope.row.status === 2'>下架</span>
							</el-button>
							<el-button v-if='scope.row.type === 0 && scope.row.status === 0'  @click="editMessage(scope.row)" type="text" size="small" >
								<span >修改</span>
							</el-button>
							<el-button  @click="checkMessage(scope.row)" type="text" size="small" >
								<span >查看</span>
							</el-button>
							<el-button v-if='scope.row.type === 0 && scope.row.status === 0'  @click="deleteMessage(scope.row)" type="text" size="small" >
								<span >删除</span>
							</el-button>
						</template>
					</el-table-column>
		</el-table>
		 <!--分页-->
		<div class="di claerfix">
			<div class="di_foot" style="margin:0 auto;">
				<el-pagination
					style='text-align:center;'
					background
					layout="prev, pager, next" 
					@current-change="handleCurrentChange" 
					:total="totalCount" 
				>
				</el-pagination>
			</div>
		</div>
</div>
</template>
<script>
import { interfaceAdmin, interfaceDel, interfaceStatus} from '../../api/api.js';
import {checkLogin} from '../../api/api.js';
export default {
	name:'InterfaceAdmin',
	data() {
		return {
			userMessage:{},
			status:'',
			id:'',
			inputValue:'',
			deteleId:'',
			dialogVisible: false,
			pageNumber:1,
			pageSize:10,
			totalCount:0,
			listLoading:false,
			tableData: [],
			dialogFormVisible: false,
			dialogFormVisible1: false,
			formLabelWidth: '120px'
		};
	},
	methods:{
	//获取用户列表
		getUsers() {
			let para = {
				pageNumber: this.pageNumber,
				pageSize: this.pageSize
			};
			this.listLoading = true;
			interfaceAdmin(para).then((res) => {
				console.log('接口列表数据...',res);
				this.tableData = res.list;
				this.totalCount = res.count;
				this.listLoading = false;
			});
		},
		//删除接口数据
		getUsers2() {
			let para = {
				id: this.deteleId
			};
			interfaceDel(para).then((res) => {
				if(res.code ==='0000'){
					let msg = '删除成功！';
					this.open(msg);
				}else if(res.code =='3003'){
					let msg = '接口不存在！';
					let type = 'error';
					this.openError(msg,type);
				}else{
					let msg = '删除失败！';
					let type = 'error';
					this.openError(msg,type);
				}
			});
		},
		//修改接口状态
		getUsers3() {
			let para = {
				status: this.status,
				id: this.id
			};
			interfaceStatus(para).then((res) => {
				if(res.code ==='0000'){
					let msg = '修改状态成功！';	
					this.open(msg);
				}else if(res.code =='3004'){
					let type = 'error';
					let msg ='接口状态不正确!';
					this.openError(msg,type)
				}else{
					let type = 'error';
					this.openError(res.message,type)
				}
			});
		},
//		查看接口信息
		checkMessage(row){
			sessionStorage.setItem('row', JSON.stringify(row));
			this.$router.push('/interfaces/interfaceView');
		},
//		修改接口
		editMessage(row){
			sessionStorage.setItem('row', JSON.stringify(row));
			this.$router.push('/interfaces/InterfaceEdit');
		},
		//删除接口
      	deleteMessage(row){
      		this.deteleId = row.id;
      		this.open4();
      	},
//		添加接口
		addInterface(){
			this.$router.push('/interfaces/interfaceAdd');
		},
		// 分页获取
		handleCurrentChange(val) {
			this.pageNumber = val;
			this.getUsers();
		},
//    	删除提示
	    open4() {
        this.$confirm('此操作将删除本条接口信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.getUsers2();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      	},
      	//操作成功提示
      	open(msg) {
        this.$message({
          message:msg,
          type: 'success'
        });
        this.getUsers();
      },
      //操作失败提示
      	openError(msg,type) {
        this.$message({
          message:msg,
          type:type
        });
        this.getUsers();
      },
		//修改状态
		handleClick(row) {
			this.id = row.id
			if(row.status == 0){
				this.status = 1
				this.getUsers3();
			}else if(row.status == 1){
				this.status = 0
				this.getUsers3();
			}else if(row.status == 2){
				this.status = 2
				this.getUsers3();
			}
		},
//		格式化状态值
		formatter(row,column){
			return row.status == 1 ? '已发布' : '未发布';
		},
//		格式化类型
		formatterType(row,column){
			return row.type == 1 ? '内部类型' : '普通类型';
		},
		// 表格样式
		tableRowClassName({rowIndex}) {
			if (rowIndex % 2==0) {
				return 'success-row';
			} else if (rowIndex % 2 !==0) {
				return 'warning-row';
			}
			return '';
		},
		tableheaderClassName() {
			return "table-head-th";
		},
		
	},
	mounted() {
		if(checkLogin(this)){
			//this.$router.push({ path: '/'});
			var userMessage = sessionStorage.getItem('userMessage')
			userMessage = JSON.parse(userMessage);
			this.userMessage = userMessage;
			console.log('userMessageuserMessageuserMessage',userMessage);
			this.getUsers();
			console.log('执行了')
		}
	}
};
</script>
<style scoped>
	.products_stable{width:100%;margin:10px;}
	.products_stable .di{
		width:90%;
		margin: 0 auto;
		overflow: hidden;
	}
	.products_stable .di .di_foot{
		width: 38%;
		padding-bottom: 20px;
		padding-top: 20px;
	}
</style>
